<template>
	<view class="searchpage_styles">
		<!-- 搜索 -->
		<view class="search_main">
			<!-- 替换组件的搜索图标 -->
			<uni-search-bar placeholder="青春期的烦恼" :value="value" @confirm="search" radius="30"  @cancel="cancel" cancel-text="取消" cancelButton="always"></uni-search-bar>
		</view>
		
		<!-- 搜索历史 -->
		<view class="search_history" v-if="!isSearch">
			<view class="search_history_title">
				<text>历史搜索</text>
				<uni-icons v-if="searchHistory.length > 0" slot="searchIcon" color="#999999" size="18" type="trash" class="trash" />
			</view>
			<view class="search_history_list">
				<SearchTag v-for="item in searchHistory" :item="item" @click="clickItem" />
			</view>
		</view>
		
		<!-- 搜索的主要内容 -->
		<view class="search_history_nav" v-if="isSearch">
			<uni-segmented-control :current="current" @clickItem="onClickMenus" :values="menuItems" styleType="text" activeColor="#F15F35">
			</uni-segmented-control>
		</view>
		
		<!-- 正文 -->
		<view class="search_history_nav_searchMain" v-if="isSearch">
			<view v-show="current === 0">
				<ReviewItem v-for="item in testList" :item="item" :isShowTag="true"/>
			</view>
			<view v-show="current === 1">
				<ArticleShow v-for="item in actList" :item="item" />
			</view>
			<view v-show="current === 2">
				<ExperienceCard v-for="item in exList" :item="item" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import SearchTag from '@/components/SearchTag.vue'
	export default {
		components:{SearchTag},
		data() {
			return {
				isSearch: false,
				value: "",
				menuItems: ["测试", "文章", "经验"],
				current: 0,
				searchHistory: ["综合测试", "青春期的烦恼", "做自己的镜子", "人生bug检测仪"],
				testList: [],
				actList: [],
				exList: []
			}
		},
		methods: {
			clickItem: function(item) {
					this.value = item;
			},
			search: function(value) {
				console.log(value, 'value')
				this.isSearch = true
				this.testList = [
					{
							icon: "../static/logo.png",
							title: "测一测你的精神气质像哪个艺术家",
							desc: "看看你的内心世界，你身上有什么样的艺术气息，发现你的兴趣所在是我我们我们",
							tag: "¥9.9次",
							count: "3048"
						},
						{
							icon: "../static/logo.png",
							title: "测一测你的精神气质像哪个艺术家",
							desc: "看看你的内心世界，你身上有什么样的艺术气息，发现你的兴趣所在是我我们我们",
							count: "3048",
							tag: "¥9.9次",
						},
				];
				this.actList = [
					{
							url: "../static/logo.png",
							des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意",
							date: "10-26 22:24",
							count: "2398",
							tags: ["艺术", "精神", "内心世界"]
						},
						{
							url: "../static/logo.png",
							des: "嗨，我想给你说 | 分享欲是最高级别的浪漫主义",
							date: "10-26 22:24",
							count: "2398",
							tags: ["艺术", "内心世界"]
						},
						{
							url: "../static/logo.png",
							des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意",
							date: "10-26 22:24",
							count: "2398",
							tags: ["艺术", "内心世界"]
						},
				];
				this.exList = [
					{
							title: "你家孩子不爱吃饭，可以试试这样做",
							images: ["../static/logo.png", ],
							tags: ["吃饭", "生活习惯"],
							date: "10-26 22:24",
							icon: "../static/logo.png",
							name: "一只忧郁的阿黄",
							des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…"
						},
						{
							title: "你家孩子不爱吃饭，可以试试这样做",
							images: ["../static/logo.png", "../static/logo.png", "../static/logo.png"],
							tags: ["吃饭"],
							date: "10-26 22:24",
							icon: "../static/logo.png",
							name: "一只忧郁的阿黄",
							des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…"
						}
				];
			},
			onClickMenus: function(item) {
				this.current = item.currentIndex
			},
			
		}
	}
</script>

<style>
	
	.searchpage_styles {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.search_main {
		width: 100%;
	}
	
	.search_history {
		width: 100%;
		margin-top: 30rpx;
		
	}
	.search_history_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.search_history_list {
		margin-top: 30rpx;
		width: 100%;
		padding: 0 20rpx;
	}
	
	.search_history_nav {
		width: 50%;
	}
	
	.search_history_nav_searchMain {
		padding-top: 20rpx;
	}

</style>
